<script setup>
import {onMounted, ref} from 'vue';
import {useStore} from "@/store";
import relativeTime from "dayjs/plugin/relativeTime"
import {api} from "@/utils/api";
import dayjs from 'dayjs';
import "dayjs/locale/zh-cn"

const store = useStore()
const { avatar } = store['getUserInfo']
const dynamics = ref([])
const background = ref(undefined)
const baseURL = ref(window.baseURL)
onMounted(async () => {
  const { rows } = await api({path: '/My/dynamic/list'})
  dynamics.value = rows
  background.value = `${window.baseURL}${dynamics.value[0]['background']}`
})
dayjs.locale('zh-cn')
dayjs.extend(relativeTime)

</script>

<template>
  <view class="dynamics">
    <view class="background">
      <image
          :src="background"
          style="width: 100%;height: 100%;"/>
    </view>
    <view class="container">
      <view class="avatar">
        <up-avatar :size="65" :src="`${baseURL}${avatar}`" shape="square"/>
      </view>
      <view v-for="(item,i) in dynamics" :key="i" class="u-demo-block" style="margin-top: 30px;">
        <view class="u-demo-block__content">
          <view class="album">
            <view class="album__avatar">
              <image
                  :src="`${baseURL}${item['avatar']}`"
                  style="width: 32px;height: 32px;border-radius: 4px"
              ></image>
            </view>
            <view class="album__content">
              <up-text
                  :text="item['userId']"
                  bold
                  size="17"
                  type="primary"
              ></up-text>
              <van-text-ellipsis
                  style="width: 100%"
                  :content="item.title+item?.dynamic"
                  :rows="3"
                  expand-text="展开"
                  collapse-text="收起"
              />
              <up-album :urls="item.imgs.split(',').map(v=>`${baseURL}${v}`)"/>
              <text style="font-size: 14px">{{ dayjs(item.publishTime).fromNow() }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="footer" style="height: 50px;"></view>
  </view>
</template>

<style lang="scss">
.dynamics {
  width: 100%;
  height: calc(100vh - 94px);

  .background {
    width: 100%;
    height: 300px;
  }

  .container {
    position: relative;
    width: 100%;
    padding: 10px;

    .avatar {
      width: 65px;
      height: 65px;
      position: absolute;
      top: -32.5px;
      right: 10px;
    }

    .album {
      @include flex;
      align-items: flex-start;

      &__avatar {
        background-color: $u-bg-color;
        padding: 5px;
        border-radius: 3px;
      }

      &__content {
        margin-left: 10px;
        flex: 1;
      }
    }
  }
}
</style>